<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>

    <link rel="stylesheet" href="css/userSetting.css" type="text/css"></link>
    <script type="text/javascript" charset="utf-8" src="js/jsonData.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <script type="text/javascript" src="js/cropbox.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/modifyUserHeadImg.js"></script>
</head>
<body style="background-color: white;">

<div class="col-xs-12">

    <div style="    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;">
        <span style="font-size: 20px">设置新头像</span><a class="btn btn-info" onclick="uploadImage()"
                                                     style="float: right; margin-right: 25px;"><span
            class="glyphicon glyphicon-cloud-upload">上传头像</span></a> <a
            href="historyHeadImage.html" style="float: right">查看历史头像</a>
    </div>

    <div class="col-xs-7">


        <a class="btn btn-default" id="uploadImageId"
           href="javascript:void(0)" class="upload-img"> <span
                class="glyphicon glyphicon-picture">选择头像</span>
        </a> <input type="file" class="" name="upload-file" id="upload-file"
                    style="display: none;"/>
        <div class="imageBox">
            <div class="thumbBox"></div>
            <div class="spinner" style="display: none">Loading...</div>
        </div>
        <div class="action">


            <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切"
                   hidden="true"> <a class="btn btn-default" id="btnZoomIn"><span
                class="glyphicon glyphicon-plus">放大</span></a> <a
                class="btn btn-default" id="btnZoomOut"><span
                class="glyphicon glyphicon-minus">缩小</span></a>


        </div>

    </div>

    <div class="col-xs-5" style="border-left: 1px solid #d4d5d7;">
        <div class="cropped"></div>
    </div>


</div>


</body>
</html>